<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import {
    addMemberTask,
    updateMemberTask,
} from '@/api/memberTask';
import { uploadFile, uploadFileList } from '@/api/file';
import { VITE_APP_IMAGE_BASE_URL as baseImage } from '@/utils/base';
import { clearFormData } from '@/utils/utils';
const props = defineProps({
    dialog: {
        required: true,
        type: Object,
        default: {}
    },
    formData: {
        required: true,
        type: Object,
        default: {}
    },
})

const { dialog, formData } = props
const emit = defineEmits(['resetQuery'])

const vUploadRef = ref();
const dataFormRef = ref(ElForm);

const stateList = ref([
    {
        label: '是',
        value: 1
    },
    {
        label: '否',
        value: -1
    }
])

const rules = reactive({
    title: [{
        required: true,
        message: '不能为空',
        trigger: 'blur',
    }],
    startEndTime: [{
        required: true,
        message: '不能为空',
        trigger: 'blur',
    }],
});


/**
 * 关闭弹窗
 */
function closeDialog() {
    dialog.visible = false;
    resetForm();
}

/**
 * 重置表单
 */
function resetForm() {
    if (dataFormRef.value) {
        dataFormRef.value.resetFields();
        dataFormRef.value.clearValidate();
    }
    clearFormData(formData);
    formData.status = 1
}

/**
 * 表单提交
 */
function handleSubmit() {
    dataFormRef.value.validate((valid: any) => {
        if (valid) {
            if (formData.id) {
                updateMemberTask(formData)
                    .then(() => {
                        closeDialog()
                        emit('resetQuery');
                        ElMessage.success('操作成功');

                    })
            } else {
                addMemberTask(formData)
                    .then(() => {
                        closeDialog()
                        emit('resetQuery');
                        ElMessage.success('操作成功');

                    })
            }

        }
    });
}

// 导入数据
function importData(fileObJ: any) {

    const file = fileObJ.files[0]

    uploadFile({ file }).then((res: any) => {
        formData.icon = `${baseImage}${res.data}`
    })
}


watch(
    () => formData.startEndTime,
    (val: any) => {
        if (Array.isArray(val)) {
            formData.startDate = val[0];
            formData.endDate = val[1];
        } else {
            formData.startDate = '';
            formData.endDate = '';
        }
    }
);


onMounted(() => {

});
</script>

<template>
    <div>
        <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" @close="closeDialog">
            <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="160px">
                <el-form-item label="任务名称" prop="name">
                    <el-input class="input-item" v-model="formData.name" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="赠送成长值" prop="growth">
                    <el-input-number class="input-item" v-model="formData.growth" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="赠送积分" prop="intergration">
                    <el-input-number class="input-item" v-model="formData.intergration" placeholder="请输入" />
                </el-form-item>
                <el-form-item prop="type" label="任务类型">
                    <el-radio-group v-model="formData.type">
                        <el-radio :value="1" size="large">正常</el-radio>
                        <el-radio :value="-1" size="large">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleSubmit">确 定</el-button>
                    <el-button @click="closeDialog">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>


<style lang="scss" scoped>
.input-item {
    width: 300px;
    margin-right: 10px;
}
</style>